<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<head>
	<title>首页</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style>
	.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
		outline: none;
		border-color: transparent;
		box-shadow:none;
	}
	
	</style>
</head>
<body>
<div    id="content">
	<section class="content-header">
		<h1>
			<i class="fa fa-dashboard"></i>
			<strong>层级管理</strong>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-home "></i>Home</a></li>
			<li>层级管理</li>
		</ol>
	</section>
	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-md-2">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>区域</strong></h3>
					</div>
					<div class="box-body">
						<ul id="hierarchyTree" class="ztree"></ul>
					</div>
				</div>
			</div>
			<div class="col-md-5">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>网格</strong></h3>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="searchGrid"  placeholder="Search..."/>
									   <span class="input-group-btn">
											<button type="button" name="search" class="btn btn-info searchBtnGrid">查询</button>
									   		<button type="button" name="reset" id="reset" class="btn btn-info resetBtnGrid">撤消</button>
									   </span>
							</div>
						</div>
					</div>
					<div class="box-body">
						<table  id="dataTableGrid" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
								<tr>
									<th width="12%" >序号</th>
									<th width="20%" >网格名称</th>
									<th width="20%" >所属区域</th>
									<th width="15%" >面积</th>
									<th width="18%" >类型</th>
									<th width="15%" >状态</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="col-md-5">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">层级添加</h4>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="search"  placeholder="Search..."/>
									   <span class="input-group-btn">
											<button type="button" name="search" class="btn btn-info searchBtn">查询</button>
									   		<button type="button" name="reset" id="reset" class="btn btn-info resetBtn">撤消</button>
									   </span>
							</div>
						</div>
					</div>
					<div class="box box-body">
						<table  id="dataTable" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
							<tr>
								<th width="5%" >序号</th>
								<th width="20%" >模板名称</th>
								<th width="20%" >模板描述</th>
								<th width="20%" >创建时间</th>
								<th width="15%" >操作</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>评分层级</strong></h3>
					</div>
					<div class="box-body">
						<div class="input-group">
							<button type="button" th:each="grading:${gradings}" th:id="${grading.id}" th:attr="level=${grading.gradingLevel.extended1}" th:text="${grading.gradingName}" class="btn btn-primary pull-left gradingBtn" style="margin: 2px;"></button>
						</div>
						<div id="funnel" style="width: 100%;height:650px;"></div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">未绑定人员</h4>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="search1"  placeholder="Search..."/>
								<span class="input-group-btn">
									<button type="button" name="search" class="btn btn-info searchBtn1">查询</button>
									<button type="button" name="reset" id="reset" class="btn btn-info resetBtn1">撤消</button>
								</span>
							</div>
							<button type="button" class="btn btn-info pull-right addUserBtn">绑定</button>
						</div>
					</div>
					<div class="box box-body">
						<table  id="dataTable1" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
							<tr>
								<th width="10%" >序号</th>
								<th width="6%"><input type="checkbox" id="allNotBound"/></th>
								<th width="18%" >名称</th>
								<th width="18%" >组织层级</th>
								<th width="18%" >评分层级</th>
								<th width="10%" >操作</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
					
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">已绑定人员</h4>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="search2"  placeholder="Search..."/>
							   	<span class="input-group-btn">
									<button type="button" name="search" class="btn btn-info searchBtn2">查询</button>
							   		<button type="button" name="reset" id="reset" class="btn btn-info resetBtn2">撤消</button>
							   	</span>
							</div>
							<button type="button" class="btn btn-info pull-right deleteUserBtn">移除</button>
						</div>
					</div>
					<div class="box box-body">
						<table  id="dataTable2" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
							<tr>
								<th width="10%" >序号</th>
								<th width="6%"><input type="checkbox" id="allBound"/></th>
								<th width="18%" >名称</th>
								<th width="18%" >组织层级</th>
								<th width="18%" >评分层级</th>
								<th width="10%" >操作</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			
			</div>
		</div>
	</section>
	
	<script th:src="@{/GridUser/griduserIndex.js}"></script>


</div>

</body>
</html>